<!DOCTYPE html>
<!--freemarker配置获得项目根路径-->
<#assign ctx=request.contextPath />
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="${ctx}/static/favicon.ico">
    <title>Sql Submit</title>
    <style>
        /* 1. 表单容器：横向Flex布局，宽屏适配 */
        .form-container {
            max-width: 1400px; /* 横屏最大宽度，可根据需求调整 */
            margin: 30px auto; /* 上下间距+水平居中 */
            padding: 25px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* 轻微阴影提升层次感 */
        }

        /* 2. 表单标题：居中且独占一行 */
        .form-title {
            text-align: center;
            font-size: 1.5rem;
            color: #333;
            margin: 0 0 25px 0;
            padding-bottom: 15px;
            border-bottom: 1px solid #f0f0f0;
        }

        /* 3. 表单主体：Flex横向布局，自动换行 */
        .sql-form {
            display: flex;
            flex-wrap: wrap; /* 超出宽度自动换行 */
            gap: 20px; /* 元素之间的水平+垂直间距 */
            align-items: flex-start; /* 顶部对齐（避免textarea拉高其他元素） */
        }

        /* 4. 表单分组（label+控件）：纵向排列，占比自适应 */
        .form-group {
            flex: 1; /* 自动分配剩余宽度 */
            min-width: 280px; /* 最小宽度（小屏幕时触发换行） */
            display: flex;
            flex-direction: column;
            gap: 8px; /* label与控件的间距 */
        }

        /* 5. 标签样式：统一字体和颜色 */
        .form-group label {
            font-size: 0.95rem;
            color: #555;
            font-weight: 500;
        }

        /* 6. 输入控件样式：统一尺寸和边框 */
        .form-group input[type="text"],
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            box-sizing: border-box;
            font-size: 0.9rem;
            transition: border-color 0.3s; /* hover边框变色过渡 */
        }

        /* 7. 文本域特殊处理：调整高度（横屏无需过高） */
        .form-group textarea {
            height: 140px; /* 比原200px更适配横屏 */
            resize: vertical;
            min-height: 100px; /* 最小高度限制 */
        }

        /* 8. 控件交互效果：hover和聚焦状态 */
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #4CAF50; /* 聚焦时边框变主题色 */
            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
        }

        /* 9. 提交按钮容器：独占一行，右对齐 */
        .submit-group {
            width: 100%; /* 独占一行 */
            display: flex;
            justify-content: flex-end; /* 右对齐 */
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #f0f0f0;
        }

        /* 10. 提交按钮样式：优化尺寸和交互 */
        .submit-btn {
            background-color: #4CAF50;
            color: white;
            padding: 10px 24px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.95rem;
            transition: background-color 0.3s;
        }

        .submit-btn:hover {
            background-color: #45a049;
            transform: translateY(-1px); /* 轻微上浮效果 */
        }

        /* 11. 响应式适配：小屏幕（<768px）自动垂直布局 */
        @media (max-width: 768px) {
            .form-container {
                max-width: 95%; /* 小屏幕占满宽度 */
                padding: 15px;
            }

            .sql-form {
                flex-direction: column; /* 垂直堆叠 */
                gap: 15px;
            }

            .form-group {
                min-width: 100%; /* 占满宽度 */
            }

            .form-group textarea {
                height: 180px; /* 小屏幕恢复稍高高度 */
            }
        }
    </style>
</head>

<body>
<!-- 外层容器：统一控制表单整体样式 -->
<div class="form-container">
    <h2 class="form-title">SQL Submit</h2>

    <!-- 表单主体：横向Flex布局 -->
    <form class="sql-form" action="${ctx}/func" method="post">
        <!-- 表单分组1：SQL类型选择 -->
        <div class="form-group">
            <label for="sqlType">CHOOSE A SQL TYPE:</label>
            <select id="sqlType" name="sqlType" required>
                <option value="0">SELECT</option>
                <option value="1">UPDATE</option>
            </select>
        </div>

        <!-- 表单分组2：启用状态选择 -->
        <div class="form-group">
            <label for="enabled">IS ENABLED:</label>
            <select id="enabled" name="enabled" required>
                <option value="1">ENABLED</option>
                <option value="0">DISABLED</option>
            </select>
        </div>

        <!-- 表单分组3：标题输入 -->
        <div class="form-group">
            <label for="title">TITLE:</label>
            <input type="text" id="title" name="title" placeholder="Enter SQL title" required>
        </div>

        <!-- 表单分组4：描述输入 -->
        <div class="form-group">
            <label for="description">DESCRIPTION:</label>
            <textarea id="description" name="description" placeholder="Enter SQL description" required></textarea>
        </div>

        <!-- 表单分组5：SQL内容输入 -->
        <div class="form-group">
            <label for="content">CONTENT:</label>
            <textarea id="content" name="content" placeholder="Enter SQL content (e.g. SELECT * FROM table)" required></textarea>
        </div>

        <!-- 提交按钮组：独占一行 -->
        <div class="submit-group">
            <button type="submit" class="submit-btn">Submit</button>
        </div>
    </form>
</div>

<script src="${ctx}/webjars/jquery/1.9.0/jquery.js"></script>
<script>
    $('form').submit(function (event) {
        event.preventDefault();
        var formData = $(this).serializeObject();
        var jsonData = JSON.stringify(formData);
        $.ajax({
            url: $('form').attr('action'),
            type: $('form').attr('method'),
            data: jsonData,
            contentType: 'application/json',
            success: function (response) {
                console.log('Data submitted successfully', response);
                window.location.href='${ctx}/page/sql-list';
            },
            error: function (error) {
                console.error('Error submitting data:', error);
                alert('Submit failed! Please check console for details.'); // 增加错误提示
            }
        });
    });

    /**
     * 自动将form表单封装成json对象
     */
    $.fn.serializeObject = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };
</script>
</body>

</html>